<template>
  <div class="content">
    <div class="first"> <span class="bule"></span> 新增消息公告</div>
    <div class="box">
      <div class="pass">编辑文章信息</div>
      <div class="confirm">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="标题" prop="userName">
            <el-input v-model="form.title" placeholder="请输入内容" style="width: 250px;"></el-input>
          </el-form-item>
          <el-form-item label="上传人" prop="userName">
            <el-input v-model="form.author" placeholder="请输入内容" style="width: 250px;"></el-input>
          </el-form-item>


          <!-- <Back title="" notice-view-sty="notice"> -->
          <template>
            <div class="con">
              <!-- <div class="header">编辑预约信息</div> -->
              <p class="title">内容</p>
              <!-- <el-form-item label="内容">
                     
                              </el-form-item> -->
              <div class="text">
                <div style="border: 1px solid #ccc;">
                  <Toolbar style="background-color: #f2f2f2; height: 30px;" :editor="editor"
                    :defaultConfig="toolbarConfig" :mode="mode" />
                  <Editor style="height: 225px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig"
                    :mode="mode" @onCreated="onCreated" />
                  <div class="bottom"></div>
                </div>
              </div>
              <!-- <el-button type="primary">保存</el-button> -->
            </div>
          </template>
          <!-- </Back> -->
          <el-form-item label="是否启用">
            <el-switch v-model="form.isShow" @change="show"></el-switch>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <!--  -->

          <!--  -->

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :disabled="!form.isShow">确认</el-button>
            <!-- 事件确认跳转 -->
            <el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template> 
<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  components: {

    Editor,
    Toolbar
  },
  data() {

    return {
      rules: {
        userName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {
        toolbarKeys: [
          'undo',
          'redo',
          '|',
          'headerSelect',
          'bold',
          'underline',
          'italic',
          'color',
          '|',
          'bulletedList',
          'numberedList',
          { key: 'group-justify', title: '对齐', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>', menuKeys: ["justifyLeft", "justifyRight", "justifyCenter", "justifyJustify"] },
          { key: 'group-indent', title: '缩进', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>', menuKeys: ['indent', 'delIndent'] },
          '|',
          'insertLink',
          { key: 'group-image', title: '图片', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>', menuKeys: ['insertImage', 'uploadImage'] },
          'emotion',
        ]
      },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
      textarea2: '',
      name: '',
      region: '',
      date1: '',
      date2: '',

      type: [],
      resource: '',
      desc: '',
      value1: '',
      form: {
        tittle: '',
        author: '',
        isShow: false,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },



      }
    }
  },
  methods: {
    show() {
      // this.form.isShow=!this.form.isShow
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    submitForm(submit) {
      setTimeout(() => {
        this.$router.push({ path: 'info' })
      }, 500)

    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style lang="scss" scoped>
.bule {
  vertical-align: 3px;
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 999px;
  background: #006EFF;
  margin-right: 8px;
}

.content {
  width: 1280px;
  min-height: 333px;

}

.w-e-bar {
  background: transparent;
  height: 35px;
}

.con {
  width: 80%;

}

.title {
  margin-left: 35px;
}

.text {
  margin-top: 10px;
  width: 80%;
  margin-left: 40px;
}

.first {
  font-size: 20px;
  padding-top: 13px;
  padding-bottom: 22px;

}

.box {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.pass {
  height: 40px;
  font-size: 10px;
  color: #006EFF;
  line-height: 40px;
  box-sizing: border-box;
  padding-left: 15px;
  background-color: rgba(242, 242, 242, 1);
  color: bl;
}

.confirm {
  box-sizing: border-box;
  padding-top: 10px;
}

el-input {
  width: 250px;
}
</style>